<template>
  <div class="news_page">
    <!-- 导航 开始 -->
    <nav-bar title="最新资讯"></nav-bar>
    <!-- 导航 end -->

    <!-- tabs 开始 -->
    <div class="tabs_box">
      <van-tabs
        v-model="active"
        border
        title-active-color="#3388FF"
        color="#3388FF"
        @change="onChange"
      >
        <van-tab
          :title="item.name"
          v-for="(item, index) in classList"
          :key="index"
        ></van-tab>
        <!-- <van-tab title="口腔健康"></van-tab>
        <van-tab title="新闻资讯"></van-tab>
        <van-tab title="行业动态"></van-tab>
        <van-tab title="前沿技术"></van-tab> -->
      </van-tabs>
    </div>
    <!-- tabs end -->

    <!-- 新闻列表 开始 -->
    <div class="news_list">
      <template v-if="newsList && newsList.length">
        <div
          class="news_cell van-hairline--bottom"
          v-for="(item, index) in newsList"
          :key="index"
          @click="lookDetail(item)"
        >
          <div class="news_info">
            <div class="title">{{ item.articleName }}</div>
            <div class="image_list">
              <div
                class="image_cell"
                v-for="(citem, index) in getImages(item.photograph)"
                :key="index"
              >
                <li-image
                  :src="citem"
                  class="img"
                  :is-preview="false"
                ></li-image>
              </div>
            </div>
            <div class="time_box">
              <span>{{ item.articleAuthor }}</span>
              <span>{{ item.createdDate }}</span>
            </div>
          </div>
        </div>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 新闻列表 end -->
  </div>
</template>
<script>
import { Tab, Tabs } from "vant";
import {
  PLATFORM_TYPE,
  GET_ARTICLE_CLASS_OPTIONS,
  GET_ARTICLE_SEARCH,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  data() {
    return {
      newsList: [],
      classList: [],
      active: 0,
      seoInfo: {},
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/news/list`}
      ]
    };
  },
  watchQuery: true,
  watch: {
    newsList: {
      handler: function (n) {
        console.log(n);
        this.newsList = n;
      },
      immediate: true,
    },
  },
  async asyncData({ query, $axios }) {
    let classList = [{ name: "全部资讯", id: "" }];
    let g = await $axios.get(GET_ARTICLE_CLASS_OPTIONS);
    classList = classList.concat(g.data || []);

    let params = {};
    params.pageNumber = 1;
    params.pageSize = 10000;
    params.articleClassId =
      query.type || (classList[0] ? classList[0].id : "") || "";
    let res = await $axios.get(GET_ARTICLE_SEARCH, { params: params });
    let obj = res.data || {};
    let newsList = obj.list || [];

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 13, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return { classList, newsList, active: Number(query.active), seoInfo };
  },
  methods: {
    // 监听菜单点击
    onChange(e) {
      console.log(e);
      //this.active = e
      let list = this.classList;
      let row = list[e];
      let query = {};
      query.type = row ? row.id : "";
      query.active = e;
      this.$router.replace({
        path: "/news/list",
        query: query,
      });
    },

    // 获取图片
    getImages(str) {
      if (!str) {
        return [];
      }
      let arr = str.split(",");
      if (arr.length > 3) {
        arr.length = 3;
      }
      return arr;
    },

    // 查看详情
    lookDetail(row) {
      this.$router.push({
        path: `/news/detail/${row.id}`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/news/list.less";
</style>